<template>
  <div id="templateShow">
    <homeHeader></homeHeader>
    <div id="bottom">
      <menuNav></menuNav>
      <main style="width: 100%;">
        <div class="merchantOrder">
          <div class="searchBox" style="margin-top: 20px;" >
            <div style="min-width: 90%;">
              商家账号：
              <el-input v-model="mchAccount" size="small" placeholder="商家账号"></el-input>单号：
              <el-input v-model="outTradeNo" size="small" placeholder="订单号/支付流水号"></el-input>选择时间：
              <!-- 开始时间 -->
              <el-date-picker
                style="width:185px"
                v-model="createTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择时间"
                size="small"
              ></el-date-picker>
              <span style="margin-right:20px">-</span>
              <!-- 结束时间 -->
              <el-date-picker
                style="width:185px"
                v-model="updateTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择时间"
                size="small"
              ></el-date-picker>
            </div>
            <el-button type="primary" @click="searchBtn">搜索</el-button>
          </div>
          <div class="content">
            <el-tabs v-model="defaultHome"  @tab-click="handleClick">
              <el-tab-pane label="全部" name="null">
                <tableCom :dataList="allDataList"></tableCom>
              </el-tab-pane>
              <el-tab-pane label="提现中(冻结中)" name="0">
                <tableCom :dataList="allDataList"></tableCom>
              </el-tab-pane>
              <el-tab-pane label="提现成功" name="1">
                <tableCom :dataList="allDataList"></tableCom>
              </el-tab-pane>
              <el-tab-pane label="提现失败" name="2">
                <tableCom :dataList="allDataList"></tableCom>
              </el-tab-pane>
            </el-tabs>
          </div>
          
          <el-pagination
            style="text-align:right;margin-top:5px"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            layout="total, prev, pager, next, jumper"
            :total="total" 
          ></el-pagination>
        </div>
      </main>
    </div>
  </div>
</template>
<script>
  import tableCom from "../components/TableCom.vue";
import menuNav from "../components/MenuNav";
import homeHeader from "../components/Header";
export default {
  //   name: "guanggaoi-report",
  components: {
    menuNav,
    homeHeader,
    tableCom
  },
  data() {
    return {
    // 搜索的内容
    mchAccount: "",
      outTradeNo: "",
      createTime: "",
      updateTime: "",

      defaultHome: "null", // 默认展示首页
      currentPage: 1, // 当前页数
      total: 0, // 查询总条数
      allDataList: [], // 全部数据
    };
  },
  created() {
    if(!JSON.parse(sessionStorage.getItem("userMsg"))){
        this.$message("未登录，请去登录")
      }
    this.allData();
  },
  methods: {
    // 点击分类导航
    handleClick() {
      this.currentPage=1
      this.allData();
      console.log(this.defaultHome)
    },
    // 请求数据
    allData() {
      if (
        this.defaultHome == 0 ||
        this.defaultHome == 1 ||
        this.defaultHome == 2
      ) {
        this.mchAccount = "";
        this.outTradeNo = "";
        this.createTime = "";
        this.updateTime = "";
      }
      this.$post("/cw/mchWithdrawBill/select", {
        pageNum: this.currentPage,
        pageSize: 10,
        records: {
          withdrawStatus: this.defaultHome, //分类切换
          mchAccount: this.mchAccount,  //搜索条件 商家账号
          outTradeNo: this.outTradeNo,  //搜索条件 订单号
          createTime: this.createTime,   //搜索条件 时间
          updateTime: this.updateTime,
          mchId: JSON.parse(sessionStorage.getItem("userMsg")).userId,
        },
      }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.allDataList = res.data.data.records;
          this.total = res.data.data.total;
        } else {
          this.allDataList = [];
          this.total = 0;
        }
      });
    },
    // 搜索
    searchBtn() {
      if (
        this.mchAccount != "" ||
        this.outTradeNo != "" ||
        this.createTime != "" ||
        this.updateTime != ""
      ) {
        this.defaultHome = "null";
        this.allData();
      }
      console.log(this.createTime);
    },
    handleCurrentChange(currentVal) {
      this.currentPage=currentVal
      console.log(currentVal);
      this.allData()
      
    },
  },
};
</script>
<style scoped>
html,
body {
  height: 100%;
  margin: 0;
  font-size: 24px;
  color: #fff;
  font-family: "微软雅黑";
  /* line-height: 50px; */
}
#templateShow {
  height: calc(100vh - 60px);
  position: relative;
  /* margin-top: -30px; */
  color: #2c3e50;
  /* background-color: black; */
}
.el-main {
  background-color: white;
}

.active {
  background-color: rgb(64, 158, 255) !important;
  color: white !important;
}
.content {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}
.content-item {
  width: 260px;
  text-align: center;
  margin-right: 56px;
  margin-top: 20px;
}
.pic {
  width: 100%;
  height: 465px;
  /* background-color: #eee; */
  overflow: hidden;
}
.pic img {
  width: 100%;
}
.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  font-size: 13px;
}
.bottom span {
  background-color: rgb(64, 158, 255);
  padding: 8px 15px;
  border-radius: 5px;
  margin-right: 5px;
  color: white;
  cursor: pointer;
}
.white {
  width: 80px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.null {
  margin-top: 300px;
  text-align: center;
  color: #999;
}
.merchantOrder {
  padding: 0 30px;
  background-color: rgb(241, 244, 246);
}
.searchBox {
  display: flex;
  min-width: 850px;
  align-items: center;
  height: 100px;
  font-size: 15px;
  background-color: white;
}
.searchBox .el-input {
  width: 150px;
  margin-right: 25px;
}
.searchBox > div {
  margin-left: 10px;
}
.searchBox .el-button {
  width: 80px;
  height: 40px;
  margin-right: 10px;
}
.content {
  margin-top: 20px;
  background-color: white;
  padding: 10px;
}
</style>